<template>
  <page-scroll :footer="true">
    <template #bg>
      <div class="bg"></div>
    </template>
    <template #header>
      <gltitle :title="title"
               :is_name="true"
               :is_back="true"
               :is_lang="false"
               :is_kf="false"
      ></gltitle>
    </template>
    <template #content>
      <div class="h-12"></div>
      <div class="px-14">
        <div class="banner">
          <img :src="info.img||require('@/assets/images/invest/detail-banner.png')" alt="">
          <div class="content">
            <div class="title">{{ info.name }}</div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="item">
          <div class="cname">{{ $t(isRepurchase ? 'new.doc38' : 'page3.doc43') }}</div>
          <div class="val flex">
            <div class="inp flex1">
              <input type="number"
                     :disabled="isRepurchase"
                     v-number-only
                     :placeholder="$t('page4.doc155',{n:info.min})" v-model="amount">
            </div>
            <div class="bi">
              <img src="../../assets/images/ico_bi1.png" alt="">USDT
            </div>
          </div>
          <p v-if="!isRepurchase" class="p1">{{ $t('page3.doc44') }}<span>{{ balance }} USDT</span></p>
          <p v-else class="p1">{{ $t('page4.doc130') }}<span>{{ forecastIncome() }} USDT</span></p>
        </div>


        <div class="item item2">
          <div class="cname">{{ $t('new.doc26') }}</div>
          <ul class="line1">
            <li v-for="(item,k) in info.movieVoList" :key="k">
              <div class="pic"><img :src="item.coverUrl" alt=""></div>
              <div class="n">{{ item.name }}</div>
            </li>
          </ul>
        </div>


        <div class="item">
          <ul class="line2">
            <li class="flex">
              <div class="n flex1">{{ $t('new.doc27') }}</div>
              <div class="s">{{ info.name }}</div>
            </li>
            <li class="flex">
              <div class="n flex1">{{ $t('new.doc19') }}</div>
              <div class="s">
                {{ $t('page3.doc36', {i1: info.days}) }}
                <!--                        {{info.days}}天-->
              </div>
            </li>
            <li class="flex" v-if="!isRepurchase">
              <div class="n flex1">{{ $t('page3.doc48') }}</div>
              <div class="s active">{{ common.accMul(info.rate, 100) }}%</div>
            </li>

            <!--复投显示-->
            <template v-if="isRepurchase">
              <li class="flex">
                <div class="n flex1">{{ $t('page3.doc48') }}</div>
                <div class="s active">{{ common.accMul(info.repeatBuyRate, 100) }}%</div>
              </li>
              <li class="flex">
                <div class="n flex1">{{ $t('new.doc38') }}</div>
                <div class="s">{{ amount }}</div>
              </li>
              <li class="flex">
                <div class="n flex1">{{ $t('page4.doc130') }}</div>
                <div class="s">{{ forecastIncome() }}</div>
              </li>

            </template>
          </ul>
        </div>


      </div>


      <PayPasswordPop v-model="password_show"
                      @submit="getBtn"/>

    </template>
    <template #footer>
      <div class="Fbottom">
        <div class="container">
          <div class="protocol">
            <div class="check-box" @click="check=!check" :class="{no:!check}">
              <img v-show="check" src="@/assets/images/public/icon-check.png" alt="">
            </div>
            <div class="txt-box">
              {{ $t('page4.doc150') }}
              <span @click="path_url('/article?id=INVESTMENT_AGREEMENT')">“{{ $t('new.doc41') }}”</span>
              {{ $t('page4.doc152') }}
              <span @click="path_url('/article?id=PURCHASE_NOTES')">“{{ $t('page4.doc153') }}”</span>
            </div>
          </div>
          <button class="btn" @click="getgo">{{ $t('page.doc83') }}</button>
        </div>
      </div>

    </template>
  </page-scroll>
</template>
<script>

import common from "@/utils/common";
import PayPasswordPop from "@/components/public/PayPasswordPop.vue";

export default {
  components: {PayPasswordPop},
  data() {
    return {
      title: this.$t('page3.doc10'),
      info: {},
      amount: '',
      password_show: false,
      txt: '',
      balance: 0,
      isRepurchase: false,//是否为复购
      check: true
    };
  },

  mounted() {
    this.getDetail()
    let {type, orderAmount} = this.$route.query
    this.isRepurchase = type == 'repurchase'
    this.amount = orderAmount || ''
  },


  methods: {
    async getDetail() {
      const url = this.URL.financial.proDetail
      let res = await this.$post(url, {productId: this.$route.query.id})
      if (res.code == 0) {

        this.info = res.data;
        this.balance = res.data.balance
        this.txt = this.$t('page3.doc49') + res.data.min
      } else {
        this.$toast(res.message);
      }
    },
    /**
     * 复投的预计收益
     */
    forecastIncome() {
      const {amount, info} = this
      if (!amount || !info.rate) return 0
      let oneDayProfit = common.accMul(info.repeatBuyRate, info.days)
      return common.accMul(amount, oneDayProfit)
    },
    passwordShowClick() {
      this.password_show = false
      this.password = ''
    },
    getgo() {
      if (!this.check) {
        return this.$toast(this.$t('new.doc42'))
      }
      if (this.amount == '') {
        this.$toast(this.$t('page3.doc50'))
        return
      }

      if (parseInt(this.amount) < parseInt(this.info.min)) {
        this.$toast(this.$t('page3.doc51') + this.info.min)
        return;
      }
      if (parseInt(this.amount) > parseInt(this.info.max)) {
        this.$toast(this.$t('page3.doc52') + this.info.max)
        return;
      }
      if (parseInt(this.amount) > parseInt(this.info.totalBalance)) {
        this.$toast(this.$t('page3.doc52') + this.info.totalBalance)
        return;
      }
      this.password_show = true
    },
    /**
     * 复购
     */
    async repeatBuy(password) {
      const url = this.URL.financial.repeatBuy
      const params = {
        orderId: this.$route.query.orderId,
        password
      }
      const res = await this.$post(url, params)
      this.$toast(res.message);
      if (res.code != 0) return;
      sessionStorage.setItem('repeatBuy', true)
      this.$router.go(-1);
    },
    getBtn(password) {
      password = this.$md5(password)
      if (this.isRepurchase) {//复购
        return this.repeatBuy(password)
      }
      this.$post(this.URL.financial.proBuy, {
        productId: this.$route.query.id,
        amount: this.amount,
        password
      }).then((res) => {
        if (res.code == 0) {
          this.info = res.data
          this.$toast(res.message);

          this.$router.replace({path: '/invest/record'});
        } else {
          this.$toast(res.message);
        }
      });
    },
    path_url(url) {
      this.$router.push({
        path: url,
        query: {}
      });
    },
  },
};
</script>


<style lang="less" scoped>

.cname {
  font-size: .36rem;
  color: #FFFFFF;
  font-weight: 600;
  margin-bottom: .2rem;
  line-height: .5rem;
}

.banner {
  position: relative;
  margin-bottom: .24rem;

  img {
    width: 100%;
    height: 2.4rem;
  }

  .content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: .48rem .32rem;

    .title {
      color: #FFF;
      font-size: .32rem;
    }
  }
}

.item2 {
  padding-bottom: 0 !important;
}

.cname {
  color: #FFF;
  font-size: .32rem;
  font-weight: 500;
}

.item {
  padding-bottom: .48rem;

  .p1 {
    margin-top: .16rem;
    font-size: .28rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

    span {
      color: #FFDD9A;
    }
  }

  .val {
    height: 1rem;
    background: #181c21;
    border-radius: .16rem;
    align-items: center;
    padding: 0 .24rem;

    .inp {
      margin-right: .24rem;

      input {
        width: 100%;
        height: .6rem;
        border: 0;
        background: none;

        &::placeholder {
          color: #565E6E;
        }
      }
    }

    .bi {
      height: .65rem;
      //background: #272A3A;
      border-radius: .08rem;
      font-size: .24rem;
      color: #fff;
      //padding: 0 .24rem;
      align-items: center;
      display: flex;

      img {
        height: .39rem;
        margin-right: .12rem;
      }
    }

  }

}

.line1 {
  white-space: nowrap;
  overflow: scroll;

  li {
    display: inline-block;
    width: 2.2rem;
    margin-right: .18rem;

    img {
      width: 100%;
      border-radius: .12REM;
    }

    .n {
      margin-top: .1rem;
      color: #BDBDBD;
    }
  }
}

.line2 {
  //margin-bottom: .24rem;
  padding: 0 .32rem;
  border-radius: .2rem;
  background: #181c21;

  li {
    border-bottom: .02rem solid #181c21;
    font-size: .22rem;
    padding: .32rem 0;

    &:nth-last-child(1) {
      border-bottom: none;
    }

    .n {
      color: #BDBDBD;

    }

    .s {
      color: #fff;

    }
  }
}

.items {
  position: fixed;
  bottom: 0;
  max-width: 10rem;
  width: 100%;
  padding-bottom: .28rem;

  button {
    background: linear-gradient(113.99deg, #114FEE 6.12%, #B654FD 83.22%);
  }
}

.Fbottom {
  background: #181c21;

  .protocol {
    display: flex;
    align-items: center;
    padding-bottom: .24rem;

    .check-box {
      flex: 0 0 .32rem;
      height: .32rem;
      border-radius: .08rem;
      margin-right: .1rem;

      &.no {
        border: .02rem solid #868686;
      }

      img {
        width: .32rem;
        height: .32rem;
      }
    }

    .txt-box {
      color: #FFF;
      font-size: .28rem;

      span {
        color: #FFDD9A;
      }
    }
  }
}

.active {
  color: #FFDD9A !important;
}
</style>
